<template>
  <div class="w-[1100px] h-[1200px] p-20 relative flex flex-col">
    <div class="flex-1">
      <div class="flex justify-center items-center">
        <div class="text-center font-semibold text-4xl flex-1">
          <div>
            {{ printObj.hisname }}
          </div>
        </div>
        <div class="absolute right-20" style="border: 2px solid #000">丨丨丨丨条形码丨丨丨丨丨</div>
      </div>
      <div class="flex justify-center items-center text-2xl">理疗病程记录单</div>

      <div class="flex justify-between items-center w-full">
        <div class="flex-1">
          <div class="flex justify-start items-center mt-4">
            <div class="">姓名： {{ printObj.brname }}</div>
            <div class="ml-2">{{ printObj.xb }}</div>
            <div class="ml-2">{{ printObj.age }}</div>
          </div>
        </div>
        <div class="flex-1">
          <div class="flex items-end w-full">
            卡号：
            <div class="flex-1">{{ printObj.brId }}</div>
          </div>
        </div>
        <div class="flex-1">
          <div class="flex items-end w-full">
            打印：
            <div class="flex-1">{{ printObj.dysj }}</div>
          </div>
        </div>
      </div>
      <div class="flex justify-between items-center pb-5 mt-2" style="border-bottom: 1px solid #000">
        <div class="flex-1 flex">
          <div class="w-80">
            <div class="flex items-end w-full">
              科室：
              <div class="flex-1">{{ printObj.ks }}</div>
            </div>
          </div>
          <div class="flex items-end w-full">
            项目：
            <div class="flex-1">{{ printObj.xm }}</div>
          </div>
          <div class="flex items-end">
            日期：
            <div class="flex-1 w-72">{{ printObj.rq }}</div>
          </div>
        </div>
      </div>

      <div class="flex justify-between items-center mt-4">
        <div class="pr-2 flex items-start">
          主诉：
          <div>{{ printObj.zs }}</div>
        </div>
      </div>
      <div class="flex justify-between items-center mt-4">
        <div class="pr-2 flex items-start">
          现病史：
          <div>{{ printObj.xbs }}</div>
        </div>
      </div>
      <div class="flex justify-between items-center mt-4">
        <div class="pr-2 flex items-start">
          既往史：
          <div>{{ printObj.jws }}</div>
        </div>
      </div>
      <div class="flex justify-between items-center mt-4">
        <div class="pr-2 flex items-start">
          疗程诊断：
          <div>{{ printObj.lczd }}</div>
        </div>
      </div>
      <div class="flex justify-between items-center mt-4">
        <div class="pr-2 flex items-start">
          疗程记录：
          <div>{{ printObj.lcjl }}</div>
        </div>
      </div>
      <div class="flex justify-between items-center mt-4">
        <div class="pr-2 flex items-start">
          疗程结果：
          <div>{{ printObj.lcjg }}</div>
        </div>
      </div>

      <div class="flex justify-end items-center mt-4 w-full">
        <div class="pr-2 flex justify-end items-center">
          护士签名：
          <div class="w-40 pt-4" style="border-bottom: 1px solid #000"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { watch } from 'vue'

const printObj = ref({})

const props = defineProps({
  printData: {
    type: Array,
    default: () => []
  }
})
watch(
  () => props.printData,
  () => {
    if (props.printData.printData?.detail[0]) {
      printObj.value = props.printData.printData?.detail[0]
    } else {
      printObj.value = {}
    }
  }
)
</script>
<style lang="less" scoped>
table tr td {
  height: 35px;
  padding: 10px;
  border: 1px solid #000;
}
</style>
